@import './variables';

.b-sizing {
    box-sizing: border-box; //防止padding border让容器变大
}
.box-sizing {
    box-sizing: border-box; //防止padding border让容器变大
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-sh {
    flex-shrink: 0; //缩放为0你防止缩放文字竖起来
}

.overflow-scroll {
    overflow: scroll;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

@for $index from 1 through 10 {
    .w-#{$index*10} {
        width: $index*10%;
    }

    .h-#{$index*10} {
        height: $index*10%;
    }
}

@each $aiKey,
$aiVal in $ai-dir {
    .ai-#{$aiKey} {
        align-items: $aiVal; //默认纵轴
    }
}

@each $jcKey,
$jcVal in $jc-dir {
    .jc-#{$jcKey} {
        justify-content: $jcVal; //默认横轴
    }
}

@each $colorsKey,
$colorsVal in $colors {
    .bg-#{$colorsKey} {
        background-color: $colorsVal;
    }
    .text-#{$colorsKey}{
        color: $colorsVal;
    }
}

@each $fsKey,
$fsVal in $font-sizes {
    .fs-#{$fsKey} {
        font-size: $fsVal+rem;
    }
}

// .px-1{
//     padding-left: ;
//     padding-right: ;
// }
// .py-1{
//     padding-top: ;
//     padding-bottom: ;
// }
@each $stKey,//m,p
$stVal in $space-type {

    @each $ssKey,//1,2,3
    $ssVal in $space-sizes {

        .#{$stKey}x-#{$ssKey}{
            #{$stVal}-left: $ssVal+rem;
            #{$stVal}-right: $ssVal+rem;
        }
        .#{$stKey}y-#{$ssKey}{
            #{$stVal}-top: $ssVal+rem;
            #{$stVal}-bottom: $ssVal+rem;
        }
        @each $sdKey,
        $sdVal in $space-dir {
            .#{$stKey}#{$sdKey}-#{$ssKey} {
                #{$stVal}-#{$sdVal}: $ssVal+rem;
            }
        }
    }
}

@mixin ellipsis($rowCount) {
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
    overflow: hidden;
}